<link rel="stylesheet" href="./city.css">
  
<div class="area">
  <div class="change-city">切换城市<b></b></div>
  <div class="box">
    <ul class="tab">
      <li class="cur">请选择</li>
      <li class="">请选择</li>
      <li class="">请选择</li>
    </ul>
    <div class="tab-content">
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京1</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京2</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京3</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
    </div>
    <div class="tab-content" style="display: none;">
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京4</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京5</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京6</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
    </div>
    <div class="tab-content" style="display: none;">
      <div class="city" area-id="1"><a href="javascript:;">北京7</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京8</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京9</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
      <div class="city" area-id="1"><a href="javascript:;">北京</a><span>-</span></div>
    </div>
  </div>
</div>

<script src="http://unpkg.com/jquery"></script>
<script src="./city.js"></script>
<script>
  $(function () {
    // 默认省数据
    // 默认市区数据
    // 默认区域、县数据
  })
</script>